<template>
  <div>
    <van-nav-bar class="m-bar" @click-right="onClickRight">
      <template slot="left">
        <van-icon class="close" name="cross" @click="close" />
      </template>
      <template slot="right"><span class="fb">发布</span></template>
    </van-nav-bar>
    <div class="m-form">
      <div class="m-form-head" @click.stop="toggleCate(true)">
        <!-- <van-cell title="选择圈子" is-link class="choose-tag">
          <template slot="title">
            <span class="title-icon">#</span>
            <span class="custom-title">选择圈子</span>
          </template>
          <template>
            能获得更多的赞和评论
          </template>
        </van-cell> -->
        <van-cell title="" is-link class="choose-tag">
          <template slot="title">
            <span class="title-icon">#</span>
            <span class="custom-title">
              <van-field
                readonly
                v-model="domain.cate"
                placeholder="选择分类，能获得更多的赞和评论~"
              />
            </span>
          </template>
        </van-cell>
        <!-- <van-cell
          title=""
          class="choose-tag"
          is-link
          @click="toggleChoose(true)"
        >
          <template slot="title">
            <span class="custom-title">
              <span class="title-icon">#</span>
              <span v-if="selectTags.length == 0">添加标签优先审核</span>
              <span v-else>已选择{{ selectTags.length }}个标签</span>
            </span>
          </template>
        </van-cell> -->
      </div>
      <div class="m-form-head"></div>
      <div>
        <van-field
          v-model="domain.title"
          autosize
          maxlength="50"
          show-word-limit
          placeholder="标题：4-50字（必填）"
        />
      </div>
      <div class="video-upload" v-if="domain.chooseType == 0">
        <div class="choos-img van-uploader">
          <div class="van-uploader__wrapper">
            <div class="van-uploader__upload">
              <video
                v-if="domain.video"
                :src="$host + domain.video"
                controls
                class="video-preview"
              />
              <template>
                <van-icon name="video" class="upload-icon" />
                <div class="upload-txt">
                  {{ domain.video ? "重新选择" : "添加视频" }}
                </div>
              </template>
              <input
                multiple="multiple"
                type="file"
                accept="video/*"
                class="van-uploader__input"
                @change="uploadVideo($event)"
              />
            </div>
          </div>
        </div>
      </div>
      <van-uploader
        class="choos-img"
        v-model="fileList"
        multiple
        :max-count="domain.chooseType == 0 ? 1 : 9"
        v-if="domain.chooseType == 1"
      >
        <div class="van-uploader__upload">
          <van-icon name="photo-o" class="upload-icon" />
          <div class="upload-txt">添加图片</div>
        </div>
      </van-uploader>
      <div>
        <van-field
          autosize
          v-model="domain.content"
          placeholder="来吧，尽情发挥..."
          type="textarea"
          v-if="domain.chooseType == 2"
          maxlength="2000"
          show-word-limit
          class="text-area"
        />
      </div>
    </div>
    <div v-if="selectTags.length > 0">
      <van-cell is-link @click="toggleChoose(true)">
        <div class="m-tag" v-for="i in selectTags" :key="i">{{ i }}</div>
      </van-cell>
    </div>
    <!-- <van-tabbar
      v-model="domain.chooseType"
      class="m-bottom"
      @change="changeType"
    >
      <van-tabbar-item>
        <van-icon
          :name="domain.chooseType == 0 ? 'video' : 'video-o'"
          class="icon"
        />
        <span class="txt">视频</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon
          :name="domain.chooseType == 1 ? 'photo' : 'photo-o'"
          class="icon"
        />
        <span class="txt">图片</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-icon
          :name="domain.chooseType == 2 ? 'comment' : 'comment-o'"
          class="icon"
        />
        <span class="txt">短文</span>
      </van-tabbar-item>
    </van-tabbar> -->
    <choose-tag
      :visiable="chooseTagShow"
      v-on:close="toggleChoose(false)"
      v-on:change="changetag"
    />
    <choose-cate
      :visiable="chooseCate"
      v-on:close="toggleCate(false)"
      v-on:change="changeCate"
      v-on:leftChange="leftChange"
    />
    <div class="btn-choose-tag" @click="toggleChoose(true)">
      <van-icon name="label" class="m-icon-tag" />
      <span v-if="selectTags.length == 0">添加标签优先审核</span>
      <span v-else>已选择{{ selectTags.length }}个标签</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ChooseTag from "@/components/ChooseTag";
import ChooseCate from "@/components/ChooseCate";
export default {
  name: "publish-topic",
  components: { ChooseTag, ChooseCate },
  data() {
    return {
      showChooseQZ: false,
      chooseCate: false,
      chooseTagShow: false,
      fileList: [],
      imageList: [],
      domain: {
        title: "",
        chooseType: 0,
        content: "",
        tag: "",
        images: "",
        video: "",
        cate: ""
      },
      cates: {
        2: [
          "都市激情",
          "人妻女友",
          "乱伦生活",
          "校园情色",
          "武侠玄幻",
          "暴力另类"
        ],
        1: ["自拍私照", "爆乳美腿", "艺术美照", "另类图片", "成人漫画"],
        0: ["自拍", "欧美", "日韩", "另类", "动漫"]
      },
      uploader: axios.create({
        headers: { "Content-Type": "multipart/form-data" }
      }),
      paddingTop: 0,
      selectTags: []
    };
  },
  methods: {
    leftChange(index) {
      this.domain.chooseType = index;
    },
    changetag(v) {
      console.log(v);
      this.selectTags = v;
    },
    changeCate(v) {
      // console.log(v);
      this.domain.cate = v;
    },
    toggleCate(show) {
      this.chooseCate = show;
    },
    toggleChoose(show) {
      this.chooseTagShow = show;
    },
    changeNav(index) {
      this.domain.chooseType = index;
    },
    changeItem(data) {
      this.chooseCate = false;
      this.domain.cate = data.text;
      this.domain.tag = data.text;
    },
    changeType(index) {
      this.domain.cate = "";
      this.domain.cateId = "";
      this.domain.tag = "";
    },
    close() {
      this.$router.go(-1);
    },
    uploadVideo(e) {
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0
      });
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      this.uploader.post(this.$host + "/upload.php", param).then(r => {
        if (r.data.code == 0) {
          this.domain.video = r.data.data;
        }
        this.$toast.clear();
      });
    },
    async doUpload() {
      let _this = this,
        imageList = [];
      for (var i = 0; i < this.fileList.length; i++) {
        let file = this.fileList[i].file;
        let param = new FormData();
        param.append("file", file);
        await this.uploader
          .post(_this.$host + "/upload.php", param)
          .then(r => {
            if (r.data.code == 0) {
              imageList.push(r.data.data);
            }
            // this.$toast(file.name + "上传结果：" + r.data.code);
          })
          .catch(e => {
            _this.$toast("网络不畅通~");
          });
      }
      console.log(imageList);
      return imageList.join(",");
    },
    onClickRight() {
      let _this = this;
      if (!_this.domain.title) {
        _this.$toast("标题必须有~");
        return;
      }
      if (this.selectTags.length == 0) {
        _this.$toast("请添加标签~");
        return;
      }
      this.$toast.loading({
        message: "发布中...",
        forbidClick: true,
        duration: 0
      });
      let o = this.doUpload().then(d => {
        switch (_this.domain.chooseType) {
          case 0:
            _this.domain.type = 5;
            // _this.domain.video = d;
            if (!_this.domain.video) {
              _this.$toast("请上传视频~");
              return;
            }
            if (!_this.domain.cate) {
              _this.$toast("请选择视频分类~");
              return;
            }
            break;
          case 1:
            _this.domain.type = 4;
            _this.domain.images = d;
            if (!_this.domain.images) {
              _this.$toast("请上传图片~");
              return;
            }
            break;
          case 2:
            _this.domain.type = 3;
            if (!_this.domain.content) {
              _this.$toast("请输入正文~");
              return;
            }
            break;
        }
        this.domain.tag = this.selectTags.join(",");
        _this.$api.publishTopic(_this.domain).then(r => {
          console.log(r);
          this.$toast.clear();
          _this.close();
        });
      });
    }
  },
  created() {
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
  }
};
</script>

<style lang="less" scoped>
.btn-choose-tag {
  position: absolute;
  left: 15px;
  bottom: 20px;
  font-size: 12px;
  background: #f5f4fa;
  padding: 5px 10px;
  border-radius: 15px;
  color: #888;
  .m-icon-tag {
    // vertical-align: middle;
    color: #fe5b53 !important;
    // font-size: 14px;
    margin-right: 3px;
  }
}
.cate-choose {
  height: 100%;
  .van-tree-select {
    height: 100% !important;
  }
}
.tag-chooser {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
}
.video-upload {
  // padding: 10px;
  .van-uploader__input {
    background: #f5f4fa !important;
  }
}
.van-uploader {
  .van-icon {
    color: #fa858a !important;
  }
}
.video-preview {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 180px;
  left: 20px;
  right: 20px;
}
.upload-txt {
  font-size: 14px;
}
.m-bar {
  height: 50px;
  line-height: 50px;
  .close,
  .fb {
    color: #888;
    font-size: 20px !important;
  }
}
.m-bar::after {
  border: none !important;
}
.m-form {
  .text-area {
    border-top: 1px solid #f5f4fa;
    // border-radius: 10px;
    // margin: 10px;
    // width: auto;
    // padding: 5px;
    margin-bottom: 60px;
  }
  .m-form-head {
    border-top: 1px solid #eee;
    // border-bottom: 1px solid #eee;
    .custom-title {
      width: 280px;
      display: inline-block;
      color: #323233;
      .van-cell {
        padding: 0;
      }
    }
    .van-icon {
      color: #fa858a;
    }
  }
  .m-form-head:last-of-type {
    border-bottom: 1px solid #eee;
  }
  .choose-tag {
    padding: 10px 15px;
  }
  .choose-tag::after {
    border: none;
  }
  .title-icon {
    border-radius: 10px 0 0 0;
    background: #888;
    display: inline-block;
    margin-right: 5px;
    padding: 0 10px;
    background-image: linear-gradient(#fe5b53, #fa858a);
    color: #fff;
  }
  .choos-img {
    margin: 20px 15px;
  }
}
.m-bottom {
  font-size: 20px;
  border: none;
  line-height: 50px;
  .icon {
    font-size: 25px;
    vertical-align: middle;
  }
  .txt {
    margin-left: 5px;
    font-size: 20px;
    vertical-align: middle;
  }
  .van-tabbar-item--active {
    color: #fa858a;
    transition: 50ms;
  }
}
.m-bottom::after {
  border: none;
}
.m-tag {
  font-size: 10px;
  display: inline-block;
  padding: 0px 8px;
  border: 1px solid #eee;
  color: #333;
  border-radius: 15px;
  position: relative;
  margin-right: 10px;
}
</style>
